<!-- 板块管理 -->
<template>
  <div>
    <!-- 模糊搜索表单 -->
    <el-form
      ref="plates"
      :inline="true"
      :model="ruleForm"
      :rules="rule"
      class="demo-form-inline searchUser"
    >
      <el-form-item label="板块名称" prop="keyword">
        <el-input
          v-model="ruleForm.topic"
          placeholder="请输入板块名称"
        ></el-input>
        <el-button type="primary" @click="increasePlate(ruleForm.topic)"
          ><i class="el-icon-plus"></i><span>新增</span></el-button
        >
      </el-form-item>
    </el-form>
    <!-- 信息表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="topic" label="板块名称" min-width="120">
      </el-table-column>
      <el-table-column prop="created_time" label="创建时间" min-width="130">
      </el-table-column>
      <el-table-column label="操作" min-width="180">
        <template slot-scope="scope">
          <el-row>
            <el-button
              type="text"
              @click="deletePlate(scope.row.id, scope.row.topic)"
              ><i class="el-icon-lock"></i><span>删除</span></el-button
            >
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.number + 1"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="page.total_elements"
        v-if="page.total_elements != 0"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      dialogTableVisible: false,
      postsContent: {},
      rule: {
        topic: [
          { min: 2, message: "长度在不得小于2个字符", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this["getData"]({
      page: 0,
      size: 10,
    });
  },
  methods: {
    ...mapActions("adminPlates", ["getData", "add_Plate", "del_Plate"]),
    handleSizeChange(val) {
      let count = this['page'].total_elements;
      let page = this['page'].number;
      page = page > Math.floor(count / val) ? Math.floor(count / val) : page;
      this["getData"]({
        page,
        size:val
      });
    },
    handleCurrentChange(val) {
      this.getData({
        page:val - 1,
        size: this['page'].size
      });
    },
    //增加板块
    increasePlate(topic) {
      this.$confirm(`确定添加${topic}板块么?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
      })
        .then(async () => {
          let status = await this['add_Plate']({topic});
          if (status == 200 || status == 204) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            setTimeout(() => {
              this.$store.commit('adminPlates/CLEAR_TOPIC');
              this['getData']({
                page:this['page'].number,
                size:this['page'].size
              });
            }, 500);
          }
        })
        .catch((error) => {
          this.$message({
            type: "info",
            message: error,
          });
        });
    },
    //删除板块
    deletePlate(plate_id, name) {
      this.$confirm(`此操作将永久删除${name}板块, 是否继续?`, "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let status = await this['del_Plate']({plate_id});
          if (status == 200 || status == 204) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            setTimeout(() => {
              this['getData']({ 
                page:this['page'].number,
                size:this['page'].size
              });
            }, 500);
          }
        })
        .catch((error) => {
          this.$message({
            type: "info",
            message: error,
          });
        });
    },
    //打开对话框
    openDialog(isopen, title, content) {
      this.dialogTableVisible = isopen;
      this.postsContent.title = title;
      this.postsContent.content = content;
    },
  },
  computed: {
    ...mapState("adminPlates", ["tableData", "gridData", "page", "ruleForm"]),
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/adminPerson_y.scss";
</style>
